<template>
  <div>
    <div class="set">
      <div class="head-top">
        <mt-header title="设置">
          <router-link to="/myself" slot="left">
            <mt-button icon="back"></mt-button>
          </router-link>
        </mt-header>
      </div>
      <div class="set-list">
        <mt-cell title="头像">
          <div>
            <!-- <div @click="actionSheet"> -->
            <span class="explain">
              <!-- <img slot="icon" src="../../../assets/fanxian.png" width="40" height="40"> -->
              <img slot="icon" :src="imgurl" :onerror="defaultImg" width="40" height="40">
            </span>
            <form hidden ref="form">
              <input hidden @change="addFile" ref="openCameraImg" type="file" accept="image/*" multiple>
            </form>
          </div>
        </mt-cell>

        <mt-cell title="昵称" to='/nickname'>
          <!--<mint-cell-value class="explain">孙悟空</mint-cell-value>-->

          <div class="explain" v-text="datlist.userName">孙悟空</div>
          <span>
            <img src="../../../../static/myself/MyCenter/pgdn.png" width="9" height="16" />
          </span>
        </mt-cell>
        <div @click='cache'>
          <mt-cell title="清除缓存">
            <span>0KB</span>
          </mt-cell>
        </div>

        <mt-cell title="当前版本">
          <span>V1.0</span>
        </mt-cell>
        <mt-cell title="关于我们" to='/abutus'>
          <span>
            <img src="../../../../static/myself/MyCenter/pgdn.png" width="9" height="16" />
          </span>
        </mt-cell>

      </div>

    </div>

    <div class="btn" @click="logout">

      <mt-button size="large">退出登录</mt-button>

    </div>
  </div>
</template>

<script>
import { MessageBox } from "mint-ui";
import baseurl from "./../../../api/baseurl.js";

export default {
  name: "set",
  data() { 
    return {
      sheetVisible: false,
      datlist: {},
      userid: "",
      currentFiles: [],
      imgurl: "",
      defaultImg: 'this.src="' + require('../../../../static/imgs/set-logo.png') + '"',
    };
  },
  created() {
    var str = localStorage.getItem("userid"); //取回students变量
    this.userid = JSON.parse(str); //把字符串转换成JSON对象
    this.getinfo();
  },
  methods: {
    addFile($event) {
      let that = this;
      let file = $event.target.files[0];
      let freader = new FileReader();
      let formData = new FormData();
      formData.append("name", file);
      formData.append("type", "test");
      console.log(formData);
      freader.readAsDataURL(file);
      freader.onload = function(e) {
        var img = new Image();
        img.src = this.result;
        // console.log(img);
        that.imgurl = this.result;
        that.uploadUserH(this.result, formData);
      };
    },
    uploadUserH(url, data) {
      console.log(url, data);
      this.$http({
        method: "post",
        url: baseurl.urls + "/userhead/uploadUserhead",
        headers: {
          "Content-Type": "multipart/form-data"
        },
        params: {
          userid: this.userid,
          userportrait: url,
          username: this.username,
          file: data
        }
      })
        .then(response => {
          console.log(response);
        })
        .catch(error => {
          console.log(error);
        });
    },
    actionSheet: function() {
      this.sheetVisible = true;
    },
    getCamera: function() {
      console.log("打开照相机");
    },
    getLibrary: function(event) {
      this.$refs.openCameraImg.click();
    },
    cache: function() {
      MessageBox.confirm("已下载的书籍会被删除", "确认清除缓存吗？").then(
        action => {
          console.log("abc");
        }
      );
    },
    logout: function() {
      MessageBox.confirm("", "确认退出登录吗？").then(action => {
        window.localStorage.clear();
        window.localStorage.clear();
        this.$router.push({
          name: "login"
        });
      });
    },
    getinfo() {
      this.$http({
        method: "post",
        url: baseurl.urls + "/userhead/selectUserhead",
        params: {
          userid: this.userid
        }
      })
        .then(response => {
          if (response.status == 200) {
            this.datlist = response.data.date;
            this.username = response.data.date.userName;
            this.imgurl = this.datlist.userPortrait;
          }
        })
        .catch(error => {
          console.log(error);
        });
    }
  }
};
</script>

<style scoped>
.mint-cell {
  margin-top: 2px;
}

.mint-header {
  height: 44px;
  background-color: #35c564;
  font-size: 18px;
}

.mint-cell {
  min-height: 60px;
}

.mint-cell-value .explain {
  margin-right: 10px;
}

.btn {
  margin: 0 16px;
  margin-top: 20px;
}

.btn button {
  background-color: #35c564;
  color: #ffffff;
  font: 16px/16px "微软雅黑";
  height: 50px;
}

.head-top {
  margin-bottom: 18px;
}

.mint-cell-text {
  font: 16px/16px "微软雅黑";
}

.set .mint-msgbox-confirm {
  color: #35c564;
}
</style>